<template>
  <div>
    <div class="onepage con">
      <router-link tag="div" to="/search" class="search">
        <svg
          style="width: 15px; height: 15px"
          class="_422q2i5I"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          width="200"
          height="200"
        >
          <path
            d="M1011.061 963.072L841.394 793.406a34.062 34.062 0 0 0-4.603-3.86c72.472-83.395 116.343-192.31 116.343-311.479C953.133 215.681 740.453 3 478.067 3 215.681 3 3 215.681 3 478.067c0 262.386 212.681 475.067 475.067 475.067 119.168 0 228.084-43.87 311.479-116.343a34.132 34.132 0 0 0 3.86 4.604l169.667 169.667c13.252 13.252 34.737 13.252 47.989 0 13.251-13.253 13.251-34.738-0.001-47.99z m-532.994-77.805c-224.904 0-407.2-182.296-407.2-407.2s182.296-407.2 407.2-407.2 407.2 182.296 407.2 407.2-182.296 407.2-407.2 407.2z"
            fill="#9c9c9c"
          ></path>
        </svg>
        <span>美式篮球裤</span>
        <svg
          style="width: 15px; height: 15px"
          class="_3a9dUxTC"
          viewBox="0.3109999895095825 64.27301788330078 1080 941"
          preserveAspectRatio="none"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M345.701 268.948c-21.195 0-38.377-17.182-38.377-38.377s17.182-38.377 38.377-38.377 38.377 17.182 38.377 38.377-17.182 38.377-38.377 38.377zM512 729.468c98.909 0 179.091-80.182 179.091-179.091S610.909 371.286 512 371.286s-179.091 80.182-179.091 179.091S413.091 729.468 512 729.468z m0 51.169c-127.169 0-230.26-103.091-230.26-230.26S384.831 320.117 512 320.117s230.26 103.091 230.26 230.26S639.169 780.637 512 780.637z m351.907-588.56l76.204 28.162c50.227 18.562 83.578 66.443 83.578 119.99v440.406c0 98.909-80.182 179.091-179.091 179.091H179.402C80.493 959.726 0.311 879.544 0.311 780.635V340.23c0-53.547 33.351-101.428 83.578-119.99l76.204-28.162 33.732-80.664c11.94-28.553 39.862-47.141 70.811-47.141h494.728c30.949 0 58.871 18.588 70.811 47.141l33.732 80.663z m-762.28 76.159C71.491 279.373 51.48 308.102 51.48 340.23v440.406c0 70.649 57.273 127.922 127.922 127.922h665.195c70.649 0 127.922-57.273 127.922-127.922V340.23c0-32.128-20.011-60.857-50.147-71.994l-86.645-32.021a25.589 25.589 0 0 1-14.735-14.127l-38.027-90.933a25.584 25.584 0 0 0-23.604-15.714H264.636a25.585 25.585 0 0 0-23.604 15.714l-38.026 90.933a25.586 25.586 0 0 1-14.735 14.127l-86.644 32.021z"
            fill="#9c9c9c"
          ></path>
        </svg>
      </router-link>
      <van-tabs v-model="activeName" class="qiehuan">
          <van-tab title="推荐" name="a" class="tuijian">
              <div class="kb"></div>
              <!-- 沾满 -->
              <div class="nav">
                <van-swipe class="my-swipe"  indicator-color="white">
                <!-- no1 -->
                  <van-swipe-item>
                    <div class="items">
                      <div class="item" v-for="(item,index) in homenavlists" :key="index">
                        <div class="imgs">
                          <img :src="item.navimgs" alt="" />
                        </div>
                        <span>{{item.titles}}</span>
                      </div>              
                    </div>
                  </van-swipe-item>
                <!-- no2 -->
                  <van-swipe-item>
                    <div class="items">
                      <div class="item" v-for="(item,index) in homenavlists2" :key="index">
                        <div class="imgs">
                          <img :src="item.navimgs" alt="" />
                        </div>
                        <span>{{item.titles}}</span>
                      </div>      
                    </div>
                  </van-swipe-item>
                </van-swipe>
              </div>
              <div class="kb kkbb"></div>
              <!-- 买菜 -->
              <div class="maicai">
                <div class="container">
                  <div class="dongxi">
                    <a class="items one">
                      <div class="imgs">
                        <img src="../assets/imgs/多多买菜.webp" alt="" />
                      </div>
                      <h1>多多买菜</h1>
                      <p>次日自提</p>
                      <div class="sjx"></div>
                    </a>
                    <a class="items another">
                      <div class="imgs">
                        <img src="../assets/ktimgs/可乐.png" alt="" />
                      </div>
                      <div class="p">￥0.1</div>
                    </a>
                    <a class="items another">
                      <div class="imgs">
                        <img src="../assets/ktimgs/汉堡.png" alt="" />
                      </div>
                      <div class="p">￥0.1</div>
                    </a>
                    <a class="items another">
                      <div class="imgs">
                        <img src="../assets/ktimgs/冰红茶.png" alt="" />
                      </div>
                      <div class="p">￥0.1</div>
                    </a>
                    <a class="items another">
                      <div class="imgs">
                        <img src="../assets/ktimgs/矿泉水.png" alt="" />
                      </div>
                      <div class="p">￥0.1</div>
                    </a>
                  </div>
                </div>
              </div>
              <div class="kb kkbbc"></div>
              <!-- 补贴 -->
              <router-link tag="div" to="/welf" class="maicai" >
                  <div class="container">
                    <div class="dongxi">
                          <router-link tag="a" to="/welf" class="items one">
              <div class="imgs">
                <img src="../assets/imgs/白衣补贴.gif" alt="" />
              </div>
              <h1>百亿补贴</h1>
              <p>大牌正品</p>
              <div class="sjx"></div>
                          </router-link>
                          <router-link tag="a" to="/welf" class="items another">
              <div class="imgs">
                <img src="../assets/ktimgs/国产手机.png" alt="" />
              </div>
              <div class="p">￥4399</div>
                          </router-link>
                          <router-link tag="a" to="/welf" class="items another">
              <div class="imgs">
                <img src="../assets/ktimgs/苹果手机.png" alt="" />
              </div>
              <div class="p">￥7266</div>
                          </router-link>
                          <router-link tag="a" to="/welf" class="items another">
              <div class="imgs">
                <img src="../assets/ktimgs/盒子.png" alt="" />
              </div>
              <div class="p">￥3780</div>
                          </router-link>
                          <router-link tag="a" to="/welf" class="items another">
              <div class="imgs">
                <img src="../assets/ktimgs/显示器.png" alt="" />
              </div>
              <div class="p">￥4000</div>
                          </router-link>
                    </div>
                  </div>
              </router-link>
              <!-- 大量商品图 -->
              <div class="container">
                <div class="dalei" >
          <router-link tag="div" :to="'/show?id='+item.id" class="items" v-for="(item,index) in homelists" :key="index">
            <div class="imgs">
              <img :src="item.sptimgs" alt="" />
            </div>
            <div class="title"><p>{{item.titles}}</p></div>
            <div class="show">
              <p>{{item.isea}}</p>
            </div>
            <div class="money">
              <span class="qian">{{item.qianq}}</span>元
              <span class="hou">{{item.hou}}</span>
            </div>
          </router-link>
                </div>
              </div>
          </van-tab>
          <van-tab title="男装" name="b" class="shouji">
            <div class="kalasi">
              <div class="items">
                <div class="item" v-for="(item,index) in wylists" :key="index">
                  <div class="imgs">
                    <img :src="item.wyimgs" alt="">
                  </div>
                  <p>{{item.title}}</p>
                </div>
              </div>
            </div>
            <div class="chose">
              <div class="one">
                <div class="imgs">
                  <img :src="ranklists[0].phimgs" alt="">
                </div>
                <div class="wenzi">
                  <p class="bt">排行榜</p>
                  <p class="day">每日更新</p>
                </div>
              </div>
              <div class="two">
                <div class="imgs">
                  <img :src="ranklists[0].jximgs" alt="">
                </div>
                <div class="wenzi">
                  <p class="bt">小编推荐</p>
                  <p class="day">精选好货</p>
                </div>
              </div>
            </div>
            <!-- 大量商品图 -->
              <div class="container">
        <div class="dalei" >
          <router-link tag="div" :to="'/show?id='+item.id" class="items" v-for="(item,index) in homelists" :key="index">
            <div class="imgs">
              <img :src="item.sptimgs" alt="" />
            </div>
            <div class="title"><p>{{item.titles}}</p></div>
            <div class="show">
              <p>{{item.isea}}</p>
            </div>
            <div class="money">
              <span class="qian">{{item.qianq}}</span>{{item.qianh}}
              <span class="hou">{{item.hou}}</span>
            </div>
          </router-link>
        </div>
              </div>
          </van-tab>
          <van-tab title="女装" name="c" class="shouji">
          </van-tab>
          <van-tab title="数码" name="d" class="shouji">
          </van-tab>
          <van-tab title="食物" name="e" class="shouji">
          </van-tab>
          <van-tab title="水果" name="f" class="shouji">
          </van-tab>
          <van-tab title="运动" name="g" class="shouji">
          </van-tab>
          <van-tab title="玩乐" name="h" class="shouji">
          </van-tab>
      </van-tabs>
    </div>

    <!-- 切换 -->
    <div class="dibu">
      <router-link tag="a" to="/home" class="items">
        <img src="../assets/imgs/白首页.webp" alt="" />
        <p>首页</p>
      </router-link>
      <router-link tag="a" to="/video" class="items">
        <img src="../assets/imgs/直播.webp" alt="" />
        <p>直播</p>
      </router-link>
      <router-link tag="a" to="/newsele" class="items">
        <img src="../assets/imgs/分类.webp" alt="" />
        <p>分类</p>
      </router-link>
      <router-link tag="a" to="/talk" class="items">
        <img src="../assets/imgs/聊天.webp" alt="" />
        <p>聊天</p>
      </router-link>
      <router-link tag="a" to="/person" class="items">
        <img src="../assets/imgs/个人中心.webp" alt="" />
        <p>个人中心</p>
      </router-link>
    </div>

    <div class="oneooo"></div>
  </div>
</template>

<script>
export default {
    props:["homelists","homenavlists","homenavlists2"],
    data(){
      return{
        activeName:"",
        wylists:[
          {
            wyimgs:require("../assets/weiyiimgs/wy1.webp"),
            title:"秋冬卫衣",
          },
          {
            wyimgs:require("../assets/weiyiimgs/wy2.webp"),
            title:"卫衣",
          },
          {
            wyimgs:require("../assets/weiyiimgs/wy3.webp"),
            title:"上衣外套",
          },
          {
            wyimgs:require("../assets/weiyiimgs/wy4.webp"),
            title:"夹克",
          },
          {
            wyimgs:require("../assets/weiyiimgs/wy5.webp"),
            title:"T恤",
          },
          {
            wyimgs:require("../assets/weiyiimgs/wy6.webp"),
            title:"休闲裤",
          },
          {
            wyimgs:require("../assets/weiyiimgs/wy7.webp"),
            title:"牛仔裤",
          },
          {
            wyimgs:require("../assets/weiyiimgs/wy8.webp"),
            title:"套装",
          },
          {
            wyimgs:require("../assets/weiyiimgs/wy9.webp"),
            title:"衬衫",
          },
          {
            wyimgs:require("../assets/weiyiimgs/wy10.webp"),
            title:"西服西裤",
          },
          {
            wyimgs:require("../assets/weiyiimgs/wy11.webp"),
            title:"背心马甲",
          },
          {
            wyimgs:require("../assets/weiyiimgs/wy12.webp"),
            title:"裤装",
          },
          {
            wyimgs:require("../assets/weiyiimgs/wy13.webp"),
            title:"POLO衫",
          },
          {
            wyimgs:require("../assets/weiyiimgs/wy14.webp"),
            title:"爸爸装",
          },
          {
            wyimgs:require("../assets/weiyiimgs/wy15.webp"),
            title:"皮衣",
          },
        ],
        ranklists:[
          {
            phimgs:require("../assets/weiyiimgs/wy15.webp"),
            jximgs:require("../assets/weiyiimgs/wy10.webp"),
          }
        ]
      }
    }

}
</script>

<style lang="scss">
.onepage .qiehuan{
  .chose{
    display: flex;
    width: 100%;
    height: 60px;
    .one{
      width: 50%;
      height: 100%;
      padding: 0 20px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      box-sizing: border-box;
      border-right: 2px solid #dfdfdf;
      .imgs{
        width: 40px;
        height: 40px;
        img{
          width: 100%;
        }
      }
      .wenzi{
        .bt{
          font-size: 14px;
        }
        .day{
          font-size: 12px;
          color: #999;
        }
      }
    }
    .two{
      width: 50%;
      height: 100%;
      padding: 0 20px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      box-sizing: border-box;
      border-left: 2px solid #dfdfdf;
      .imgs{
        width: 40px;
        height: 40px;
        img{
          width: 100%;
        }
      }
      .wenzi{
        .bt{
          font-size: 14px;
        }
        .day{
          font-size: 12px;
          color: #999;
        }
      }
    }
  }
  .kalasi{
    width: 100%;
    border-bottom: 2px solid #dfdfdf;
    border-top: 2px solid #dfdfdf;
    .items{
      width: 100%;
      display: flex;
      flex-wrap:wrap ;
      .item{
        width: 20%;
        height: 90px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .imgs{
          margin-top: 10px;
          width: 50px;
          height: 50px;
          img{
            width: 100%;
          }
        }
        p{
          font-size: 12px;
        }
      }
    }
  }
}
.oneooo {
  width: 100%;
  height: 90px;
}
.onepage .search {
  display: block;
  height: 34px;
  width: 93%;
  border-radius: 5px;
  margin-left: 13px;
  margin-top: 13px;
  background-color: #ededed;
  text-align: center;
  line-height: 34px;
  font-size: 14px;
  color: #9e9e9e;
  margin-bottom: 5px;
  position: relative;
}
.onepage  ._3a9dUxTC {
  position: absolute;
  right: 10px;
  top: 10px;
}
.onepage .kb {
  width: 100%;
  height: 8px;
  background-color: #f0f0f0;
}
.onepage  .nav {
  width: 100%;
  height: 155px;
  /* background-color: aqua; */
}
.onepage  .body {
  width: 93%;
  height: 155px;
  margin-left: 13px;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}
.onepage  .body .items {
  height: 73px;
  width: 20%;
  /* background-color: aqua; */
  text-align: center;
  font-size: 12px;
  color: #5a5a5a;
}
.onepage  .body .imgs {
  width: 36px;
  height: 36px;
  margin: 0 auto;
  margin-top: 10px;
}
.onepage  .body .imgs img {
  width: 100%;
}
.onepage  .huadong {
  width: 93%;
  height: 11px;
  /* background-color: aqua; */
  margin-left: 13px;
  display: flex;
  justify-content: center;
}
.onepage  .huadong ol {
  display: block;
  /* margin-top: 5px; */
  display: flex;
}
.onepage  .huadong ol li {
  margin-top: 4px;
  width: 35px;
  height: 4px;
  background-color: #e8e8e8;
  border-radius: 2px;
}
.onepage  .huadong ol li.con {
  width: 35px;
  height: 4px;
  background-color: red;
}
.onepage  .kkbb {
  margin-top: 11px;
}
.onepage  .maicai {
  width: 100%;
  height: 90px;
}

.onepage  .dongxi {
  width: 93%;
  height: 90px;
  /* background-color: red; */
  margin-left: 13px;
  display: flex;
}
.onepage  .dongxi .items {
  width: 72px;
  flex: 1;
  display: block;
  /* background-color: green; */
}
.onepage  .dongxi .one {
  position: relative;
  width: 78px;
  height: 90px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  border-right: 1px solid #e3e3e2;
}
.onepage  .dongxi .one .imgs {
  width: 31px;
  height: 31px;
  margin-top: 12px;
}
.onepage  .dongxi .one .imgs img {
  width: 100%;
}
.onepage  .dongxi .one h1 {
  font-size: 12px;
}
.onepage  .dongxi .one p {
  font-size: 10px;
  color: #868686;
}
.onepage  .sjx {
  border: 6px solid #dfe5e1;
  border-top: 6px solid transparent;
  border-left: 6px solid transparent;
  border-bottom: 6px solid transparent;
  position: absolute;
  top: 50%;
  right: 0px;
}
.onepage  .dongxi .another {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: red;
  font-size: 12px;
}
.onepage  .dongxi .another .imgs {
  width: 55px;
  height: 55px;
}
.onepage  .dongxi .another .imgs img {
  width: 100%;
}
.onepage  .kbkbc {
  margin-top: 0px;
}
.onepage  .dalei {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  background-color: #efeeeb;
}
.onepage  .dalei .items {
  display: block;
  width: 48%;
  height: 255px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  margin-top: 8px;
  justify-content: space-around;

}
.onepage  .dalei .items .imgs {
  width: 180px;
  height: 180px;
}
.onepage  .dalei .items .imgs img {
  width: 100%;
}
.onepage  .dalei .items p {
  font-size: 14px;
  color:#000;
  text-align: left;
  padding-left: 6px;
}
.onepage  .dalei .items .money {
  color: red;
  font-size: 10px;
  text-indent: 1em;
}
.onepage  .dalei .items .qian {
  font-size: 14px;
}
.onepage  .dalei .items .hou {
  font-size: 14px;
  color: #888888;
}
.onepage  .dibu {
  width: 100%;
  height: 75px;
  display: flex;
  font-size: 10px;
  position: fixed;
  bottom: 0px;
  background-color: #fff;
}
.onepage  .dibu .items {
  display: block;
  margin-top: 5px;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
}
.onepage  .dibu img {
  width: 21px;
}

.onepage  .my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
.onepage  .titles {
  width: 94%;
  margin: 0 auto;
  height: 25px;
  text-align: center;
  line-height: 22px;
  font-size: 12px;
  color: #000;
}
.onepage  .title.con {
  border-bottom: 2px solid red;
}

.onepage  .nav {
  width: 96%;
  margin: 0 auto;
}
.onepage  .nav .custom-indicator {
  width: 100%;
  position: absolute;
  left: 0px;
  bottom: 0px;
  text-align: center;
}
.onepage  .nav .custom-indicator ul {
  display: inline-block;
  margin: 0 auto;
}
.onepage  .nav .custom-indicator ul li {
  display: inline-block;
  width: 70px;
  height: 11px;
  margin: 0 2px;
  background-clip: green;
  z-index: 99;
}
.onepage  .nav .items {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  background-color: #fff;
}
 .onepage  .nav .item {
  width: 20%;
  height: 70px;
  /* background-color: red; */
  position: relative;
  margin-top: 10px;
}
.onepage  .nav .item .imgs {
  width: 40px;
  height: 40px;
  position: absolute;
  left: 10px;
}
.onepage  .nav .item span {
  line-height: 20px;
  color: #000;
  width: 60px;
  height: 20px;
  font-size: 12px;
  position: absolute;
  top: 50px;
  left: 5px;
}
.onepage  .nav .item .imgs img {
  width: 100%;
}
</style>